<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <!-- load css -->
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/font/iconfont.css}" media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/js/layui/css/layui.css}"  media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/main.css}" media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap-table/bootstrap-table.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/table.css}"  media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/js/select2/css/select2.css}" media="all"/>

    <style>

        .wizard {
            -webkit-border-radius: 2px;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 2px;
            -moz-background-clip: padding;
            border-radius: 2px;
            background-clip: padding-box;
            -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .3);
            -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .3);
            box-shadow: 0 0 4px rgba(0, 0, 0, .3);
            background-color: #fff;
            position: relative;
            overflow: hidden
        }

        .wizard.wizard-tabbed {
            background: #fbfbfb
        }

        .wizard.wizard-tabbed ul li {
            padding: 0 30px;
            background-color: #fbfbfb
        }

        .wizard.wizard-tabbed ul li .chevron {
            display: none
        }

        .wizard.wizard-tabbed ul li .chevron:before {
            display: none
        }

        .wizard.wizard-tabbed ul li.complete {
            background-color: #fbfbfb
        }

        .wizard.wizard-tabbed ul li.active {
            background: #fff
        }

        .wizard.wizard-wired {
            padding-top: 10px;
            display: block;
            background: #fff;
            text-align: center;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            border-bottom: 1px solid #eee
        }

        .wizard.wizard-wired ul {
            display: table;
            width: 100%;
            position: relative
        }

        .wizard.wizard-wired ul li {
            display: table-cell;
            text-align: center;
            background-color: #fff;
            width: 20%;
            padding: 0;
            margin: 0;
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -o-transition: all 1s ease;
            transition: all 1s ease
        }

        .wizard.wizard-wired ul li .chevron {
            display: none
        }

        .wizard.wizard-wired ul li .chevron:before {
            display: none
        }

        .wizard.wizard-wired ul li.complete {
            background-color: #fff
        }

        .wizard.wizard-wired ul li.complete .step:before {
            font-size: 22px;
            line-height: 36px
        }

        .wizard.wizard-wired ul li.complete:hover {
            background-color: #fff
        }

        .wizard.wizard-wired ul li.active {
            background-color: #fff
        }

        .wizard.wizard-wired ul li .step {
            border-width: 2px;
            width: 40px;
            height: 40px;
            line-height: 34px;
            font-size: 15px;
            z-index: 2;
            background-color: #fff
        }

        .wizard.wizard-wired ul li .title {
            display: block;
            margin-top: 4px;
            margin-bottom: 6px;
            max-width: 100%;
            font-size: 14px;
            line-height: 20px;
            z-index: 104;
            text-align: center;
            table-layout: fixed;
            -ms-word-wrap: break-word;
            word-wrap: break-word
        }

        .wizard.wizard-wired ul li:before {
            display: block;
            content: "";
            width: 100%;
            height: 2px !important;
            font-size: 0;
            overflow: hidden;
            background-color: #e5e5e5;
            position: relative !important;
            top: 25px;
            z-index: 1 !important
        }

        .wizard.wizard-wired ul li:first-child:before {
            max-width: 51%;
            left: 50%
        }

        .wizard.wizard-wired ul li:last-child:before {
            max-width: 50%;
            width: 50%
        }

        .wizard ul {
            list-style: none outside none;
            padding: 0;
            margin: 0;
            width: 4000px
        }

        .wizard ul.previous-disabled li.complete {
            cursor: default
        }

        .wizard ul.previous-disabled li.complete:hover {
            background: #f3f3f3;
            cursor: default
        }

        .wizard ul.previous-disabled li.complete:hover .chevron:before {
            border-left-color: #f3f3f3
        }

        .wizard ul li {
            float: left;
            margin: 0;
            padding: 0 20px 0 30px;
            line-height: 46px;
            position: relative;
            background: #f5f5f5;
            color: #d0d0d0;
            font-size: 16px;
            cursor: default;
            -webkit-transition: all .218s ease;
            -moz-transition: all .218s ease;
            -o-transition: all .218s ease;
            transition: all .218s ease
        }

        .wizard ul li .step {
            border: 2px solid #e5e5e5;
            color: #ccc;
            font-size: 13px;
            border-radius: 100%;
            position: relative;
            z-index: 2;
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height: 20px;
            text-align: center;
            margin-right: 10px
        }

        .wizard ul li .chevron {
            border: 24px solid transparent;
            border-left: 14px solid #d4d4d4;
            border-right: 0;
            display: block;
            position: absolute;
            right: -14px;
            top: 0;
            z-index: 1
        }

        .wizard ul li .chevron:before {
            border: 24px solid transparent;
            border-left: 14px solid #f5f5f5;
            border-right: 0;
            content: "";
            display: block;
            position: absolute;
            right: 1px;
            top: -24px;
            -webkit-transition: all .218s ease;
            -moz-transition: all .218s ease;
            -o-transition: all .218s ease;
            transition: all .218s ease
        }

        .wizard ul li.complete {
            background: #f5f5f5;
            color: #444
        }

        .wizard ul li.complete:before {
            display: block;
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: -1px;
            height: 2px;
            max-height: 2px;
            overflow: hidden;
            background-color: #a0d468;
            z-index: 10000
        }

        .wizard ul li.complete:hover {
            background: #eee;
            cursor: pointer
        }

        .wizard ul li.complete:hover .chevron:before {
            border-left: 14px solid #eee
        }

        .wizard ul li.complete .chevron:before {
            border-left: 14px solid #f5f5f5
        }

        .wizard ul li.complete .step {
            color: #a0d468;
            border-color: #a0d468
        }

        .wizard ul li.complete .step:before {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            line-height: 20px;
            text-align: center;
            border-radius: 100%;
            content: "";
            background-color: #fff;
            z-index: 3;
            font-family: FontAwesome;
            font-size: 12px;
            color: #a0d468
        }

        .wizard ul li.active {
            background: #fff;
            color: #262626
        }

        .wizard ul li.active .step {
            border-color: #2dc3e8;
            color: #2dc3e8
        }

        .wizard ul li.active:before {
            display: block;
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: -1px;
            height: 2px;
            max-height: 2px;
            overflow: hidden;
            background-color: #2dc3e8;
            z-index: 10000
        }

        .wizard ul li.active .chevron:before {
            border-left: 14px solid #fff
        }

        .wizard ul li .badge {
            margin-right: 8px
        }

        .wizard ul li:first-child {
            -webkit-border-radius: 2px 0 0 0;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 2px 0 0 0;
            -moz-background-clip: padding;
            border-radius: 2px 0 0 0;
            background-clip: padding-box;
            padding-left: 20px
        }

        .step-content {
            border-top: 0;
            -webkit-border-radius: 0 0 2px 2px;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 0 0 2px 2px;
            -moz-background-clip: padding;
            border-radius: 0 0 2px 2px;
            background-clip: padding-box;
            padding: 10px;
            margin-bottom: 10px;
            -webkit-box-shadow: 1px 0 10px 1px rgba(0, 0, 0, .3);
            -moz-box-shadow: 1px 0 10px 1px rgba(0, 0, 0, .3);
            box-shadow: 1px 0 10px 1px rgba(0, 0, 0, .3);
            background-color: #fbfbfb
        }

        .step-content .step-pane {
            display: none
        }

        .step-content .active {
            display: inline;
        }

        .step-content .active .btn-group .active {
            display: inline-block
        }
        .wizard{
            position: fixed;
            z-index:9999;
        }
        .actions .btn-group, .btn-group-vertical{
            left: 5%;
        }
    </style>

</head>

<body>
<!--<div id="simplewizardinwidget" class="wizard" data-target="#simplewizardinwidget-steps">-->
<!--<div class="actions" id="simplewizardinwidget-actions">-->
<!--</div>-->
<!--</div>-->
<!--预留相对定位头部覆盖掉的部分-->
<form action="" class="layui-form layui-form-pane" id="myform" style="position: relative;top: 47px;">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">电子秤</label>
            <div class="layui-input-inline">
                <select name="sx" id="sx">
                    <option value="192.168.30.89:11001">电子秤(192.168.30.89)</option>
                    <option value="192.168.30.18:11002">电子秤(192.168.30.18)</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">实际重量</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="sjzl" id="sjzl" placeholder="请输入实际重量" />
            </div>
        </div>
    </div>
    <div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">快递</label>
        <div class="layui-input-inline">
            <select name="kd" id="kd">
                <option value="1">申通</option>
                <option value="2">圆通</option>
            </select>
        </div>
    </div>
    </div>
    <div class="layui-inline" style="float:right;">
        <button class="layui-btn" jq-filter="submit" lay-submit="" lay-filter="print">打印快递面单</button>
        <button class="layui-btn" jq-filter="submit" lay-submit="" lay-filter="queding">确定</button>
    </div>
    <input type="hidden" th:value="${ids}" id="fhid">
</form>

</body>
<div th:include="public/public_js::public_js"></div>
<script th:src="@{/plugin/beyond/assets/js/fuelux/wizard/wizard-custom.js}"></script>

<script>
    layui.use(['myform','zzpUtils','form'],function () {
        var form = layui.form,
            zzpUtils = layui.zzpUtils;
        form.on("submit(print)",function(data){
            var fhid=$("#fhid").val();
            var sjzl=$("#sjzl").val();
            var kd=$("#kd").val();
            console.log(fhid+"------------"+sjzl+"----------"+kd);
            if($("#sjzl").val()!=""){
                zzpUtils.confirm("是否确定打印?",function(index){
                    $.ajax({
                        url: "/zxsswms/wmsassistdelivery/print/"+fhid+"/"+sjzl+"/"+kd,
                        type: "GET",
                        dataType: "JSON",
                        contentType: 'application/json',
                        async: false,
                        success: function (data) {
                            var LODOP=getLodop();
                            LODOP.PRINT_INIT('打印快递面单');
                            LODOP.ADD_PRINT_URL(0, 0, 746, '100%', data.data[0]);
                            LODOP.SET_PRINT_STYLEA(0, 'HOrient', 3);
                            setTimeout(function () {
                                LODOP.PREVIEW();
                            }, 500);
                        },
                        error: function () { console.log("Error"); }
                    });
                })
            }else{
                layer.msg("实际数量不能为空");
            }
            return false;
        });
        form.on("submit(queding)",function(data){
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
        });
    });
</script>
</html>